/* ======================================================= 
 *
 *      Date Picker In Fullscreen
 *      Version: 1
 *      By castlecode
 *
 *      Contact: http://codecanyon.net/user/castlecode
 *      Created: June 30, 2017
 *
 *      Copyright (c) 2017, castlecode. All rights reserved.
 *      Available only in http://codecanyon.net/
 *    
 *      ---------------------------------
 *      CONTENTS
 *      ---------------------------------
 *
 *      [A] FAKE INPUT
 *      [B] MODAL
 *      [C] INVERTED COLORS
 *      [D] MODAL CONTROLS
 *      [E] MODAL BACKGROUND
 *      [F] SHOW CLASS
 *      [G] DATE PICKER
 *      [H] EFFECTS
 *      [F] LANDSCAPE
 *    
 * ======================================================= */

/* ====================================================================== *
        [A] FAKE INPUT
 * ====================================================================== */      

  .dpifs-fake-input{
      box-sizing: border-box; 
      background: #fff;
      border: 1px solid #e4e4e4;
      height: 42px;
      line-height: 42px;
      display: block;
      width: 100%;  
      padding: 0px 12px;
      cursor: pointer;
  }

/* ====================================================================== *
        [B] MODAL
 * ====================================================================== */      

  .dpifs-hide-scrollbar{
    overflow-y: hidden;
  }

  .datepicker-in-fullscreen-modal{
      width: 100%;
      max-width: 667px;
      height: auto;
      max-height: 90%;
      padding: 0px;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 99999999;
      
      /*
      -webkit-backface-visibility : hidden;
      -moz-backface-visibility    : hidden;
      backface-visibility         : hidden;
      */
      visibility                  : hidden;

      -webkit-transform   : translateX(-50%) translateY(-50%);
      -moz-transform      : translateX(-50%) translateY(-50%);
      -ms-transform       : translateX(-50%) translateY(-50%);
      transform           : translateX(-50%) translateY(-50%);
  }

  .datepicker-in-fullscreen-content{
      background: white;
      position: relative;
      border-radius: 3px;
  }

  @media only screen and (max-width: 500px) {
    .datepicker-in-fullscreen-modal{
      top: initial !important;
      bottom: 0 !important;

      -webkit-transform   : translateX(-50%) translateY(-0%) !important;
      -moz-transform      : translateX(-50%) translateY(-0%) !important;
      -ms-transform       : translateX(-50%) translateY(-0%) !important;
      transform           : translateX(-50%) translateY(-0%) !important;
    }
  }

  .datepicker-in-fullscreen{
    padding: 10px;
  }

  @media only screen and (max-width: 500px) {
    .datepicker-in-fullscreen{
      padding: 5px;
    }    
  }

/* ====================================================================== *
        [C] INVERTED COLORS
 * ====================================================================== */        

  .dpifs-inverted-colors .datepicker-in-fullscreen-content{
    background: rgba(48, 54, 65, 1) !important;
  }

  .dpifs-inverted-colors .table-condensed > thead > tr > th.dow {
      color: #d4d3d3;
  }

  .dpifs-inverted-colors .datepicker-in-fullscreen-content,
  .dpifs-inverted-colors div.datepicker table tr td.day,
  .dpifs-inverted-colors .datepicker-in-fullscreen-controls>a  {
      color: #fff;
  }

  .dpifs-inverted-colors div.datepicker table tr td.old, 
  .dpifs-inverted-colors div.datepicker table tr td.new,
  .dpifs-inverted-colors .datepicker table tr td.disabled, 
  .dpifs-inverted-colors .datepicker table tr td.disabled:hover {
    color: #565656;
  }

  .dpifs-inverted-colors .datepicker table tr td.day:hover, 
  .dpifs-inverted-colors .datepicker table tr td.focused,
  .dpifs-inverted-colors .datepicker-in-fullscreen-controls>a:hover,
  .dpifs-inverted-colors .datepicker .datepicker-switch:hover, 
  .dpifs-inverted-colors .datepicker .next:hover, 
  .dpifs-inverted-colors .datepicker .prev:hover, 
  .dpifs-inverted-colors .datepicker tfoot tr th:hover,
  .dpifs-inverted-colors .datepicker table tr td span.focused, 
  .dpifs-inverted-colors .datepicker table tr td span:hover {
    background: rgba(255, 255, 255, 0.41);
  }

  .dpifs-inverted-colors .datepicker-in-fullscreen-controls>a,
  .dpifs-inverted-colors .datepicker-in-fullscreen-controls>a:first-child{
    border-color: #565656;
  }

  .dpifs-inverted-colors .datepicker table tr td.active.active, 
  .dpifs-inverted-colors .datepicker table tr td.active.highlighted.active, 
  .dpifs-inverted-colors .datepicker table tr td.active.highlighted:active, 
  .dpifs-inverted-colors .datepicker table tr td.active:active, 
  .dpifs-inverted-colors .datepicker table tr td span.active.active, 
  .dpifs-inverted-colors .datepicker table tr td span.active.disabled.active, 
  .dpifs-inverted-colors .datepicker table tr td span.active.disabled:active, 
  .dpifs-inverted-colors .datepicker table tr td span.active.disabled:hover.active, 
  .dpifs-inverted-colors .datepicker table tr td span.active.disabled:hover:active, 
  .dpifs-inverted-colors .datepicker table tr td span.active:active, 
  .dpifs-inverted-colors .datepicker table tr td span.active:hover.active, 
  .dpifs-inverted-colors .datepicker table tr td span.active:hover:active {
    background: #ffffff !important;
    color: #303641 !important;
    text-shadow: none !important;
  }

  .dpifs-inverted-colors.datepicker-in-fullscreen-background{
    background: rgba(255,255,255, 0.94);
  }

/* ====================================================================== *
        [D] MODAL CONTROLS
 * ====================================================================== */      

  .datepicker-in-fullscreen-controls{
    text-align: center;
    box-sizing: border-box;
  }
  .datepicker-in-fullscreen-controls>a{
    display: inline-block;
    box-sizing: border-box;
    width: 33.33%;
    padding: 15px 5px;
    color: rgb(51, 51, 51);
    text-decoration: none;
    font-weight: 600;
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
  }
  .datepicker-in-fullscreen-controls>a:first-child{
    border-left: 1px solid #eee;
  }
  .datepicker-in-fullscreen-controls>a:hover{
    background: #eee;
    cursor: pointer;
  }

/* ====================================================================== *
        [E] MODAL BACKGROUND
 * ====================================================================== */    

  .datepicker-in-fullscreen-background{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999998;
      background: rgba(48, 54, 65, 0.94);
      visibility: hidden;
      opacity: 0;

      -webkit-transition  : all 0.3s;
      -moz-transition     : all 0.3s;
      transition          : all 0.3s;
  }

/* ====================================================================== *
        [F] SHOW CLASS
 * ====================================================================== */      

  .dpifs-show{
    visibility: visible;
  }

  .dpifs-show ~ .datepicker-in-fullscreen-background {
    opacity: 1;
    visibility: visible;
  }


/* ====================================================================== *
        [G] DATE PICKER
 * ====================================================================== */      

  div.datepicker table, 
  div.datepicker-inline{
      width: 100%;
      font-size: 20px;
  }

  .table-condensed > thead > tr > th.dow{
      color: #999999;
  }

  .table-condensed > thead > tr > th{
      font-weight: normal !important;
  }

  .table-condensed > thead > tr > th, 
  .table-condensed > tbody > tr > th, 
  .table-condensed > tfoot > tr > th, 
  .table-condensed > thead > tr > td, 
  .table-condensed > tbody > tr > td, 
  .table-condensed > tfoot > tr > td {
      padding: 10px;
  }

  div.datepicker table tr td.day{
      color: #303641;
  }

  .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    cursor:not-allowed;
    color: #dddddd !important;
  }

  div.datepicker table tr td.old, 
  div.datepicker table tr td.new {
      color: #dddddd;
  }

  div.datepicker table tr td.active{
      color: #fff;
  }

  .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active,
  .datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover:active {
      background: #303641 !important;
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  }
  
/* ====================================================================== *
        [H] EFFECTS
 * ====================================================================== */   
  
  /* Effect 0: Fade in */

  .dpifs-effect-0 .datepicker-in-fullscreen-content{
    opacity: 0;

    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .dpifs-show.dpifs-effect-0 .datepicker-in-fullscreen-content{
    opacity: 1;
  }

  /* Effect 1: Fade in and scale up */

  .dpifs-effect-1 .datepicker-in-fullscreen-content{
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .dpifs-show.dpifs-effect-1 .datepicker-in-fullscreen-content{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  
  /* Effect 2: Slide from the right */

  .dpifs-effect-2 .datepicker-in-fullscreen-content {
    -webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    transform: translateX(20%);
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  }
  .dpifs-show.dpifs-effect-2 .datepicker-in-fullscreen-content {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  /* Effect 3: Slide from the bottom */

  .dpifs-effect-3 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .dpifs-show.dpifs-effect-3 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  /* Effect 4: Newspaper */

  .dpifs-effect-4 .datepicker-in-fullscreen-content {
    -webkit-transform: scale(0) rotate(720deg);
    -moz-transform: scale(0) rotate(720deg);
    -ms-transform: scale(0) rotate(720deg);
    transform: scale(0) rotate(720deg);
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-4 ~ .datepicker-in-fullscreen-background,
  .dpifs-effect-4 .datepicker-in-fullscreen-content {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
  }
  .dpifs-show.dpifs-effect-4 .datepicker-in-fullscreen-content {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  /* Effect 5: fall */

  .dpifs-effect-5.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-5 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(600px) rotateX(20deg); 
    -moz-transform: translateZ(600px) rotateX(20deg); 
    -ms-transform: translateZ(600px) rotateX(20deg); 
    transform: translateZ(600px) rotateX(20deg); 
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-5 .datepicker-in-fullscreen-content {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform: translateZ(0px) rotateX(0deg);
    -moz-transform: translateZ(0px) rotateX(0deg);
    -ms-transform: translateZ(0px) rotateX(0deg);
    transform: translateZ(0px) rotateX(0deg); 
    opacity: 1;
  }

  /* Effect 6: side fall */

  .dpifs-effect-6.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-6 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); 
    -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
    -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
    transform: translate(30%) translateZ(600px) rotate(10deg); 
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-6 .datepicker-in-fullscreen-content {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
    -moz-transform: translate(0%) translateZ(0) rotate(0deg);
    -ms-transform: translate(0%) translateZ(0) rotate(0deg);
    transform: translate(0%) translateZ(0) rotate(0deg);
    opacity: 1;
  }

  /* Effect 7:  slide and stick to top */

  .dpifs-effect-7{
    top: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .dpifs-effect-7 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-7 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    border-radius: 0 0 3px 3px;
    opacity: 1;
  }

   /* Effect 8:  slide and stick to bottom */

  .dpifs-effect-8{
    top: initial;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .dpifs-effect-8 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -ms-transform: translateY(200%);
    transform: translateY(200%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-8 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    border-radius: 0 0 3px 3px;
    opacity: 1;
  }
  
  /* Effect 9: 3D flip horizontal */

  .dpifs-effect-9.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-9 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    -moz-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-9 .datepicker-in-fullscreen-content {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }

  /* Effect 10: 3D flip vertical */

  .dpifs-effect-10.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-10 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-70deg);
    -moz-transform: rotateX(-70deg);
    -ms-transform: rotateX(-70deg);
    transform: rotateX(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-10 .datepicker-in-fullscreen-content {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
  }

  /* Effect 11: 3D sign */

  .dpifs-effect-11.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-11 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-60deg);
    -moz-transform: rotateX(-60deg);
    -ms-transform: rotateX(-60deg);
    transform: rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .dpifs-show.dpifs-effect-11 .datepicker-in-fullscreen-content {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
  }

  /* Effect 12: Super scaled */

  .dpifs-effect-12 .datepicker-in-fullscreen-content {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .dpifs-show.dpifs-effect-12 .datepicker-in-fullscreen-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  /* Effect 13:  Just me */

  .dpifs-effect-13 .datepicker-in-fullscreen-content {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .dpifs-show.dpifs-effect-13 ~ .datepicker-in-fullscreen-background {
    background: #fff;
  } 
  .dpifs-effect-13 .datepicker-in-fullscreen-content {
    background: transparent;
  }
  .dpifs-show.dpifs-effect-13 .datepicker-in-fullscreen-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  /* Effect 14: 3D slit */

  .dpifs-effect-14.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-14 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-3000px) rotateY(90deg);
    -moz-transform: translateZ(-3000px) rotateY(90deg);
    -ms-transform: translateZ(-3000px) rotateY(90deg);
    transform: translateZ(-3000px) rotateY(90deg);
    opacity: 0;
  }
  .dpifs-show.dpifs-effect-14 .datepicker-in-fullscreen-content {
    -webkit-animation: slit .7s forwards ease-out;
    -moz-animation: slit .7s forwards ease-out;
    animation: slit .7s forwards ease-out;
  }
  @-webkit-keyframes slit {
    50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
  }
  @-moz-keyframes slit {
    50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
    100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
  }
  @keyframes slit {
    50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
    100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
  }

  /* Effect 15:  3D Rotate from bottom */

  .dpifs-effect-15.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-15 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateY(100%) rotateX(90deg);
    -moz-transform: translateY(100%) rotateX(90deg);
    -ms-transform: translateY(100%) rotateX(90deg);
    transform: translateY(100%) rotateX(90deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    transform-origin: 0 100%;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .dpifs-show.dpifs-effect-15 .datepicker-in-fullscreen-content {
    -webkit-transform: translateY(0%) rotateX(0deg);
    -moz-transform: translateY(0%) rotateX(0deg);
    -ms-transform: translateY(0%) rotateX(0deg);
    transform: translateY(0%) rotateX(0deg);
    opacity: 1;
  }

  /* Effect 16:  3D Rotate in from left */

  .dpifs-effect-16.datepicker-in-fullscreen-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
  }
  .dpifs-effect-16 .datepicker-in-fullscreen-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    transform-origin: 0 100%;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .dpifs-show.dpifs-effect-16 .datepicker-in-fullscreen-content {
    -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    transform: translateZ(0px) translateX(0%) rotateY(0deg);
    opacity: 1;
  }

/* ====================================================================== *
        [F] SMALLER VERSION OF CALENDAR FOR LANDSCAPE
 * ====================================================================== */      

@media screen and ( max-height: 500px ){
    .datepicker-in-fullscreen-modal {
      max-width: 500px;
    }

    .datepicker-in-fullscreen-controls>a{
      padding: 9px 5px;
      font-size: 10px;
    }

    div.datepicker table, 
    div.datepicker-inline{
        width: 100%;
        font-size: 12px;
    }

    .table-condensed > thead > tr > th, 
    .table-condensed > tbody > tr > th, 
    .table-condensed > tfoot > tr > th, 
    .table-condensed > thead > tr > td, 
    .table-condensed > tbody > tr > td, 
    .table-condensed > tfoot > tr > td {
      padding: 5px;
    }
}